<template>
  <div>
    <!-- 页面基础模板 -->
    <base-header-footer
      :isShowContentTitle="false"
      :isShowBreadCrumb="false"
      :isShowArchived="false"
    >
      <!-- isShowTitle : 布尔值，是否显示当前页面标题组件-->
      <!-- isShowBreadCrumb : 布尔值，是否显示当前页面面包屑导航组件-->
      <!-- isShowArchived : 布尔值，是否显示当前页面归档组件-->
      <template slot="content-item-breadCrumb">
        <!-- 自定义面包屑导航插槽 -->
      </template>
      <template slot="content-item">
        <!-- 内容插槽 -->
        <div class="setting">
          <div class="set-left">
            <div class="set-avatar">
              <UploadAvatar></UploadAvatar>
            </div>
            <div class="set-nav">
              <ul>
                <li
                  :class="activeIndex == '/set/general' ? 'active' : ''"
                  @click="handleChildren('/set/general')"
                >
                  <i class="iconfont icon-gerenziliao"></i>基本资料
                </li>
                <li
                  :class="activeIndex == '/set/messages' ? 'active' : ''"
                  @click="handleChildren('/set/messages')"
                >
                  <i class="iconfont icon-sixin"></i>我的私信
                </li>
                <li
                  :class="activeIndex == '/set/notifications' ? 'active' : ''"
                  @click="handleChildren('/set/notifications')"
                >
                  <i class="iconfont icon-tongzhi"></i>系统通知
                </li>
                <li
                  :class="activeIndex == '/set/password' ? 'active' : ''"
                  @click="handleChildren('/set/password')"
                >
                  <i class="iconfont icon-xiugaimima"></i>修改密码
                </li>
                <li @click="handleLogout">
                  <i class="iconfont icon-tuichu"></i>退出登录
                </li>
              </ul>
            </div>
          </div>
          <div class="set-right">
            <router-view />
          </div>
        </div>
      </template>
    </base-header-footer>
  </div>
</template>

<script>
import UploadAvatar from "@/components/userlist/uploadAvatar/UploadAvatar.vue";
import BaseHeaderFooter from "@/components/baseheaderfooter/BaseHeaderFooter.vue";
import { mapActions, mapMutations } from "vuex";
export default {
  name: "",
  components: {
    UploadAvatar,
    BaseHeaderFooter,
  },
  data() {
    return {
      activeIndex: "/set/general",
    };
  },
  watch: {
    $route: {
      async handler(newVal, oldVal) {
        this.activeIndex = await this.changePath(newVal.path);
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    ...mapMutations(["setUserInfo"]),
    ...mapActions(["changePath"]),
    handleChildren(path) {
      this.activeIndex = path;
      this.$router.push(path);
    },
    //退出登录
    handleLogout() {
      this.setUserInfo({ value: {}, app: this });
      this.$router.push("/");
    },
  },
};
</script>
<style lang="less" scoped>
@media only screen and (max-width: 1240px) {
  /deep/.el-card {
    .el-form-item {
      .el-form-item__label {
        width: 100% !important;
      }
      .el-form-item__content {
        margin-left: 0 !important;
      }
    }
  }
}
@media only screen and (min-width: 768px) {
  .setting {
    .set-left {
      width: 300px;
      .set-avatar {
        padding: 50px 40px;
        margin-bottom: 20px;
        border: 1px solid #f1f1f1;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        background: #fff;
        /deep/.upload-avatar {
          line-height: 1.4;
          .upload-content {
            width: 88px;
            height: 88px;
            margin-bottom: 15px;
          }
          h1 {
            font-size: 20px;
          }
        }
      }
      .set-nav {
        ul {
          background: #fff;
          li {
            position: relative;
            padding: 14px 24px;
            border: 1px solid #f1f1f1;
            border-top: transparent;
            box-sizing: border-box;
            font-size: 14px;
            display: flex;
            align-items: center;
            cursor: pointer;
            &:first-child {
              border-top: 1px solid #f1f1f1;
            }
            i {
              font-size: 24px;
              color: #08c;
              width: 30px;
              text-align: center;
            }
            &:hover {
              color: #3361ea;
              i {
                color: #3361ea;
              }
            }
          }
          li.active {
            &::before {
              content: "";
              display: block;
              position: absolute;
              top: 12px;
              left: 0;
              width: 2px;
              height: 30px;
              background: #206be7;
            }
          }
        }
      }
    }
    .set-right {
      margin-left: 20px;
    }
  }
}
@media only screen and (max-width: 768px) {
  /deep/.content {
    margin-top: 0 !important;
  }
  .setting {
    .set-left {
      width: 80px;
      line-height: 1.4;
      .set-avatar {
        padding: 20px 10px;
        display: flex;
        justify-content: center;
        /deep/.upload-avatar {
          .upload-content {
            width: 48px;
            height: 48px;
            margin-bottom: 0;
            i {
              font-size: 20px;
            }
          }
          h1 {
            font-size: 13px;
            font-weight: bold;
          }
          > span {
            display: none;
          }
        }
      }
      .set-nav {
        ul {
          // background: #fff;
          li {
            position: relative;
            padding: 10px 10px 10px 12px;
            border-bottom: 1px solid #dddddd;
            box-sizing: border-box;
            font-size: 13px;
            display: flex;
            align-items: center;
            cursor: pointer;
            i {
              display: none;
            }
            &:hover {
              color: #3361ea;
              i {
                color: #3361ea;
              }
            }
          }
          li.active {
            &::before {
              content: "";
              display: block;
              position: absolute;
              top: 8px;
              left: 0;
              width: 2px;
              height: 20px;
              background: #206be7;
            }
          }
        }
      }
    }
  }
}
/deep/.content {
  margin-top: 20px !important;
}
.setting {
  display: flex;
  .set-right {
    flex: 1;
    /deep/.el-card {
      height: 100%;
      .el-card__header {
        font-size: 18px;
        padding: 20px 40px;
      }
      .el-card__body {
        padding: 20px 40px;
        .el-form-item__label {
          color: #26262699;
        }
        .el-form-item__content {
          color: #26262699;
          p {
            span {
              margin: 0 20px;
              color: #0088cc;
              cursor: pointer;
              &:hover {
                color: #3361ea;
              }
            }
          }
          .el-textarea {
            textarea {
              resize: auto;
              min-height: 76px !important;
            }
          }
          > span {
            font-size: 13px;
          }
          > .el-button {
            font-size: 12px;
            background: #0088cc;
            &:hover {
              background: #1a94d1;
            }
          }
        }
      }
    }
  }
}
</style>
